/*
 * @Date: 2022-03-30 15:48:16
 * @LastEditors: LiuPeng
 * @LastEditTime: 2022-04-06 14:11:27
 * @FilePath: \pay\src\components\TableTitle\index.jsx
 * @Description: 
 * 
 */

import React from 'react';

import {
  Row, Col, Input, Popover, Checkbox
} from 'antd';

import { UnorderedListOutlined } from '@ant-design/icons';

// 引入样式
import myStyle from './../../pages/AgencyPay/CSS/AgencyPayOrder.module.css'
// 引入初始化数据
const Index = (props) => {
  let {
    numberOfTransactions,
    transaction_mount,
    deductionAmount,
    transactionFee,
    optionsList,
    filterColumnData,
    columns,
    setcolumnsList,
    options,
    empList,
    useEffect,
    setOptions
  } = props

  // 筛选列 发生改变时调用的函数
  const filterColumnChange = (list) => {
    setOptions(list)
  }
  useEffect(() => {
    columns.forEach(item => {
      // console.log(item);
      options.forEach(item1 => {
        if (item.key === item1) {
          empList.push(item)
        }
      })
      if (item.key === 'operation') {
        empList.push(item)
      }
    })
    setcolumnsList(empList)
  }, [options])


  /* 筛选列 check Group */
  const filterColumn = (
    < >
      <Checkbox.Group
        onChange={filterColumnChange}
        options={filterColumnData}
        defaultValue={optionsList}
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-around'
        }}
      >
      </Checkbox.Group>
    </>
  )

  return (
    <>
      {/* 表格头部信息 */}
      <Row className={myStyle.row_padding}>
        {/* 交易笔数 */}
        <Col span={5} className={myStyle.col_style}>
          <span className={myStyle.col_first_span}>交易笔数</span>
          <span className={myStyle.col_second_span}>
            <Input className={myStyle.col_input} disabled
              value={numberOfTransactions} />
          </span>
        </Col>
        {/* 交易金额 */}
        <Col span={5} className={myStyle.col_style}>
          <span className={myStyle.col_first_span}>交易金额
          </span>
          <span className={myStyle.col_second_span}>
            <Input className={myStyle.col_input} disabled
              value={transaction_mount}
            />
          </span>
        </Col>
        {/* 交易手续费 */}
        <Col span={5} className={myStyle.col_style}>
          <span className={myStyle.col_first_span}>交易手续费</span>
          <span className={myStyle.col_second_span}>
            <Input className={myStyle.col_input} disabled
              value={transactionFee}
            />
          </span>
        </Col>
        {/* 扣除金额 */}
        <Col span={5} className={myStyle.col_style}>
          <span className={myStyle.col_first_span}>扣除金额</span>
          <span className={myStyle.col_second_span}>
            <Input className={myStyle.col_input} disabled
              value={deductionAmount}
            />
          </span>
        </Col>

        {/* 筛选列 */}
        <Col span={4} className={myStyle.col_style} style={{ textAlign: 'right' }}>
          <Popover
            placement="bottomRight"
            content={filterColumn}
            trigger="click">
            <UnorderedListOutlined
              style={{
                lineHeight: '43px',
              }}
            />
          </Popover>
        </Col>
      </Row>
    </>
  );
}

export default Index;

